import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { CollectionBannerMock } from './mock'
import AvatarView from '../../AvatarView'
import ShareBtn from '../../Button/ShareBtn'
import EditBtnOutLine from '../../Button/EditBtnOutLine'

interface CollectionBannerProps {
    collectionId: string
}

export default function CollectionBanner(props: CollectionBannerProps) {
    const [collectionBanner, setCollectionBanner] = useRecoilState(CollectionBannerMock)
    const [bannerHeight, setBannerHeight] = useState<any>()
    const [contentWidth, setContentWidth] = useState<any>()

    useEffect(() => {
        setBannerHeight($(`.${style.content}`).outerHeight(true) + 'px')
        $(document).width()! > 1050 ? setContentWidth('70%') : setContentWidth('100%')
    }, [])

    return (
        <>
            <div
                className={style.container}
                style={{
                    ['--banner-height' as any]: bannerHeight,
                    ['--content-width' as any]: contentWidth
                }}>
                <div className={style.bg}>
                    <img src={collectionBanner.img} />
                </div>
                <div className={style.content}>
                    <div className={style.center}>
                        <span>{collectionBanner.collectionName}</span>
                        <div className={style.user}>
                            <AvatarView width={'32px'} height={'32px'} img={collectionBanner.head} />
                            <span>{collectionBanner.userName}</span>
                            <div className={style.share__btn}>
                                <EditBtnOutLine
                                    type={'collection'}
                                    data={collectionBanner}
                                    width={'40px'}
                                    height={'32px'}
                                />
                                <ShareBtn userName={collectionBanner.userName} width={'82px'} height={'32px'} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                className={style.num}
                style={{
                    ['--content-width' as any]: contentWidth
                }}>
                <span>{collectionBanner.photosNum}张 图片</span>
            </div>
        </>
    )
}
